// webpack 是node写出来的 node写法
let path = require('path')
// console.log(path.resolve(__dirname, 'dist'))
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css 在模式 mode: 'production' 生效
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 压缩js
let UglifyjsPlugin= require('uglifyjs-webpack-plugin')
let webpack = require('webpack')

module.exports = {
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true,
    contentBase: './build',
    compress: true
  },
  optimization: { // 优化项 在生产环境
    minimizer: [
      new UglifyjsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  } ,
  mode: 'development', // 模式 默认两种 production development
  entry: './src/index.js', // 入口
  output: {
    filename: 'bundle.[hash:8].js', // 打包后的文件名
    path: path.resolve(__dirname, 'build'), // 路径必须是一个绝对路径, __dirname当前目录
    // 分类 全局
    // publicPath: 'http://www.halang.com'
  },
  plugins: [ // 数组 放着所有的webpack插件
    new HtmlWebpackPlugin({
      // 模板
      template: './src/index.html',
      // 打包后文件
      filename: 'index.html',
      // 压缩文件
      minify: {
        // 去掉双引号
        removeAttributeQuotes: true,
        // 开启一行
        collapseWhitespace: true
      },
      // 打包出来的文件加hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      filename: 'css/main.css'
    }),
    // 在每个模块中都注入$ ,但是还没有挂载到window
    // new webpack.ProvidePlugin(
    //   {
    //     '$': jquery
    //   }
    // )
  ],
  // 引入不打包, 也即是cdn引入，在这里不打包
  // externals: {
  //   jquery: $
  // },
  module: { // 模块
    rules: [ // 规则 css-loader 接续@import这种语法的
      // style-loader 他是把css 插入的head的标签中
      // loader的特点 希望单一
      // loader的用法 字符串只用一个loader
      // 多个loader需要[]
      // loader的顺序 默认是从右到左 从下到上
      // loader还可以写成 对象方式
      // { // 但是也是需要引入jquery模块import $ from 'jquery' ， 希望在每个模块中注入,引入webpack
      //   test: require.resolve('jquery'),
      //   use: 'expose-loader?$'
      // },
      // <<--先关掉语法校验-->>
      // {
      //   test: /\.js$/,
      //   use: {
      //     loader: 'eslint-loader',
      //     options: {
      //       enforce: 'pre', // previous->强制前置  post->是最后执行
      //     }
      //   }
      // },
      {
        test: /\.(htm|html)$/,
        use: 'html-withimg-loader'
      },
      {
        test: /\.(png|jpg|gif)$/,
        // use: 'file-loader'
        // 做一个限制 当我们的图片 小于多少k的时候 用base64来转化
        // 否则用file-loader产生真是的图片
        use: {
          loader: 'url-loader',
          options:{
            limit: 200*1024,
            outputPath: '/img/',
            // 图片单独加
            // publicPath: 'http://www.halang.com'
          }
        }
      },
      {
        test: /\.js$/, // normal 普通的loader
        use: {
          loader: 'babel-loader',
          options: { // 用babel-loader  需要把es6->es5 presets大集合
            presets: [
              '@babel/preset-env'
            ],
            plugins: [
              ["@babel/plugin-proposal-decorators", {"legacy": true}],
              ["@babel/plugin-proposal-class-properties", {"loose": true}],
              '@babel/plugin-transform-runtime'
            ]
          }
        },
        include: path.resolve(__dirname, 'src'),
        // 排除
        exclude: /node_modules/
      },
      { 
        // 可以处理less文件
        test: /\.css$/, 
        use:[
          // MiniCssExtractPlugin(抽离成一个文件main.css) 替换 以下代码
          // {
          //   loader: 'style-loader',
          //   options: {
          //     // 把这些放head在最顶 4.4版本以上的是insert， 而不是insertAt
          //     insert: 'top',
          //     injectType: 'singletonStyleTag', // 将所有的style标签合并成一个
          //   }
          // },
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
        ]
      },
      { 
        // 可以处理less文件
        // sass node-sass  sass-loader
        // stylus stylus-loader
        test: /\.less$/, 
        use:[
          // {
          //   loader: 'style-loader',
          //   options: {
          //     // 把这些放在最顶
          //     insert: 'top'
          //   }
          // },
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      }
    ]

  }
}